import {Col, Form} from "@douyinfe/semi-ui";

export interface SliderItem {
    label: string,
    field: string,
}

export interface InputItem extends SliderItem {
    placeholder: string
}

export interface SelectItem extends InputItem {
    options: { text: string, value: string | number }[]
}

export const generateInputLayout = (span: number, inputItems: InputItem[]) => {
    const {Input} = Form
    return (
        <>{/* 使用空的Fragment包裹 */}
            {inputItems.map((item) => (
                <Col span={span} key={item.field}> {/* 添加key属性 */}
                    <Input
                        field={item.field}
                        trigger='blur'
                        label={item.label}
                        style={{width: '90%'}} // 这里style需要具体值，你可以根据需求设置
                        placeholder={item.placeholder}
                    />
                </Col>
            ))}
        </>
    );
};
export const generateSelectLayout = (span: number, selectItems: SelectItem[]) => {
    return (
        <>
            {selectItems.map((item) => (
                <Col span={span} key={item.field}> {/* 添加key属性 */}
                    <Form.Select label={item.label} field={item.field} style={{width: '90%'}}
                                 placeholder={item.placeholder}>
                        {item.options.map((option) => (
                            <Form.Select.Option value={option.value}>{option.text}</Form.Select.Option>
                        ))}
                    </Form.Select>
                </Col>
            ))}
        </>
    );
};
export const generateSliderLayout = (span: number, sliderItems: SliderItem[]) => {
    return (
        <>
            {sliderItems.map((item) => (
                <Col span={span}>
                    <Form.Slider
                        label={item.label} field={item.field} step={1} max={10}
                                 marks={{
                                     0: '0',
                                     1: '1',
                                     2: '2',
                                     3: '3',
                                     4: '4',
                                     5: '5',
                                     6: '6',
                                     7: '7',
                                     8: '8',
                                     9: '9',
                                     10: '10'
                                 }}
                                 defaultValue={[1, 10]}
                                 style={{width: "90%"}}/>
                </Col>
            ))}
        </>
    );
};